<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.6. Edits</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="textlevel-semantics.html#textlevel-semantics"><span class="secno">4.5</span> <span class="content">Text-level semantics</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics-embedded-content.html#semantics-embedded-content"><span class="secno">4.7</span> <span class="content">Embedded content</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="edits.html#edits"><span class="secno">4.6</span> <span class="content">Edits</span></a>
       <ol class="toc">
        <li><a href="edits.html#the-ins-element"><span class="secno">4.6.1</span> <span class="content">The <span><code>ins</code></span> element</span></a>
        </li><li><a href="edits.html#the-del-element"><span class="secno">4.6.2</span> <span class="content">The <span><code>del</code></span> element</span></a>
        </li><li><a href="edits.html#attributes-common-to-ins-and-del-elements"><span class="secno">4.6.3</span> <span class="content">Attributes common to <code>ins</code> and <code><span>del</span></code> elements</span></a>
        </li><li><a href="edits.html#edits-and-paragraphs"><span class="secno">4.6.4</span> <span class="content">Edits and paragraphs</span></a>
        </li><li><a href="edits.html#edits-and-lists"><span class="secno">4.6.5</span> <span class="content">Edits and lists</span></a>
        </li><li><a href="edits.html#edits-and-tables"><span class="secno">4.6.6</span> <span class="content">Edits and tables</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.6" id="edits"><span class="secno">4.6. </span><span class="content">Edits</span><a class="self-link" href="edits.html#edits"></a></h3>
     <p>The <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-16">ins</a></code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-12">del</a></code> elements represent edits to the document.</p>
     <h4 class="heading settled" data-level="4.6.1" id="the-ins-element"><span class="secno">4.6.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-ins"><code>ins</code></dfn> element</span><a class="self-link" href="edits.html#the-ins-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-62">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-88">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-101">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-43">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-61">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-102">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-64">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-3">Transparent</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-61">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-62">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-62">Global attributes</a>
      </dd><dd><code>cite</code> - Link to the source of the quotation or more information about the edit 
      </dd><dd><code>datetime</code> - Date and (optionally) time of the change 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-63">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-61">DOM interface</a>:
      </dt><dd>Uses the <code>HTMLModElement</code> interface.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-17">ins</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-74">represents</a> an addition to the document.</p>
     <div class="example" id="example-8bce0caa">
      <a class="self-link" href="edits.html#example-8bce0caa"></a> The following represents the addition of a single paragraph: 
<pre class="highlight"><span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;ins&gt;</span>
  <span class="nt">&lt;p&gt;</span> I like fruit. <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/ins&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
      <p>As does the following, because everything in the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-22">aside</a></code> element here counts as <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-103">phrasing content</a> and therefore there is just one <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-11">paragraph</a>:</p>
<pre class="highlight"><span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;ins&gt;</span>
  Apples are <span class="nt">&lt;em&gt;</span>tasty<span class="nt">&lt;/em&gt;</span>.
  <span class="nt">&lt;/ins&gt;</span>
  <span class="nt">&lt;ins&gt;</span>
  So are pears.
  <span class="nt">&lt;/ins&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
     </div>
     <p><code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-18">ins</a></code> elements should not cross <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-12">implied paragraph</a> boundaries.</p>
     <div class="example" id="example-2827f63e">
      <a class="self-link" href="edits.html#example-2827f63e"></a> The following example represents the addition of two paragraphs, the second of which was
    inserted in two parts. The first <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-19">ins</a></code> element in this example thus crosses a
    paragraph boundary, which is considered poor form. 
<pre class="bad">&lt;aside&gt;  &lt;!-- don’t do this --&gt;
  &lt;ins datetime="2005-03-16 00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
  &lt;/ins&gt;
  &lt;ins datetime="2007-12-19 00:00Z"&gt;
  So are pears.
  &lt;/ins&gt;
&lt;/aside&gt;</pre>
      <p>Here is a better way of marking this up. It uses more elements, but none of the elements cross
    implied paragraph boundaries.</p>
<pre class="highlight"><span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;ins</span> <span class="na">datetime=</span><span class="s">"2005-03-16 00:00Z"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span> I like fruit. <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/ins&gt;</span>
  <span class="nt">&lt;ins</span> <span class="na">datetime=</span><span class="s">"2005-03-16 00:00Z"</span><span class="nt">&gt;</span>
  Apples are <span class="nt">&lt;em&gt;</span>tasty<span class="nt">&lt;/em&gt;</span>.
  <span class="nt">&lt;/ins&gt;</span>
  <span class="nt">&lt;ins</span> <span class="na">datetime=</span><span class="s">"2007-12-19 00:00Z"</span><span class="nt">&gt;</span>
  So are pears.
  <span class="nt">&lt;/ins&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.6.2" id="the-del-element"><span class="secno">4.6.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-del"><code>del</code></dfn> element</span><a class="self-link" href="edits.html#the-del-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-63">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-89">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-104">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-62">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-105">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-65">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-4">Transparent</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-62">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-63">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-63">Global attributes</a>
      </dd><dd><code>cite</code> - Link to the source of the quotation or more information about the edit 
      </dd><dd><code>datetime</code> - Date and (optionally) time of the change 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-64">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-62">DOM interface</a>:
      </dt><dd>Uses the <code>HTMLModElement</code> interface.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-13">del</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-75">represents</a> a removal from the document.</p>
     <p><code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-14">del</a></code> elements should not cross <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-13">implied paragraph</a> boundaries.</p>
     <div class="example" id="example-de57462f">
      <a class="self-link" href="edits.html#example-de57462f"></a> The following shows a "to do" list where items that have been done are crossed-off with the
    date and time of their completion. 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>To Do<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>Empty the dishwasher<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del</span> <span class="na">datetime=</span><span class="s">"2009-10-11T01:25-07:00"</span><span class="nt">&gt;</span>Watch Walter Lewin’s lectures<span class="nt">&lt;/del&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del</span> <span class="na">datetime=</span><span class="s">"2009-10-10T23:38-07:00"</span><span class="nt">&gt;</span>Download more tracks<span class="nt">&lt;/del&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Buy a printer<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.6.3" id="attributes-common-to-ins-and-del-elements"><span class="secno">4.6.3. </span><span class="content">Attributes common to <code>ins</code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-15">del</a></code> elements</span><a class="self-link" href="edits.html#attributes-common-to-ins-and-del-elements"></a></h4>
     <p>The <dfn class="dfn-paneled" data-dfn-for="edits" data-dfn-type="element-attr" data-export="" id="element-attrdef-edits-cite"><code>cite</code></dfn> attribute may be used to specify the
  address of a document that explains the change. When that document is long, for instance the
  minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the
  specific part of that document that discusses the change.</p>
     <p>If the <code>cite</code> attribute is present, it must be a <a data-link-type="dfn" href="infrastructure.html#valid-url-potentially-surrounded-by-spaces" id="ref-for-valid-url-potentially-surrounded-by-spaces-4">valid
  URL potentially surrounded by spaces</a> that explains the change. <span class="impl">To obtain
  the corresponding citation link, the value of the attribute must be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#resolve-promise">resolved</a> relative to the element.</span> User agents may allow users to follow such
  citation links, but they are primarily intended for private use (e.g., by server-side scripts
  collecting statistics about a site’s edits), not for readers.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="edits" data-dfn-type="element-attr" data-export="" id="element-attrdef-edits-datetime"><code>datetime</code></dfn> attribute may be used to specify
  the time and date of the change.</p>
     <p>If present, the <code>datetime</code> attribute’s value must be a <a data-link-type="dfn" href="infrastructure.html#valid-date-string-with-optional-time" id="ref-for-valid-date-string-with-optional-time-1">valid date string with optional time</a>.</p>
     <div class="impl">
      <p>User agents must parse the <code>datetime</code> attribute according
  to the <a data-link-type="dfn" href="infrastructure.html#parse-a-date-or-time-string" id="ref-for-parse-a-date-or-time-string-1">parse a date or time string</a> algorithm. If that doesn’t return a <a data-link-type="dfn" href="infrastructure.html#dates-date" id="ref-for-dates-date-3">date</a> or a <a data-link-type="dfn" href="infrastructure.html#global-date-and-time" id="ref-for-global-date-and-time-4">global date and time</a>,
  then the modification has no associated timestamp (the value is non-conforming; it is not a <a data-link-type="dfn" href="infrastructure.html#valid-date-string-with-optional-time" id="ref-for-valid-date-string-with-optional-time-2">valid date string with optional time</a>). Otherwise, the modification is marked as
  having been made at the given <a data-link-type="dfn" href="infrastructure.html#dates-date" id="ref-for-dates-date-4">date</a> or <a data-link-type="dfn" href="infrastructure.html#global-date-and-time" id="ref-for-global-date-and-time-5">global date and time</a>. If the given value is a <a data-link-type="dfn" href="infrastructure.html#global-date-and-time" id="ref-for-global-date-and-time-6">global date and time</a> then user agents should use the associated
  time-zone offset information to determine which time zone to present the given datetime in.</p>
     </div>
     <p>This value <span class="impl">may be shown to the user, but it</span> is primarily intended for
  private use.</p>
     <p>The <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-20">ins</a></code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-16">del</a></code> elements <span class="impl">must</span> implement the <code class="idl"><a data-link-type="idl" href="edits.html#htmlmodelement-htmlmodelement" id="ref-for-htmlmodelement-htmlmodelement-1">HTMLModElement</a></code> interface:</p>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLModElement" data-dfn-type="interface" data-export="" id="htmlmodelement-htmlmodelement">HTMLModElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-64">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="edits.html#dom-htmlmodelement-cite" id="ref-for-dom-htmlmodelement-cite-1">cite</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="edits.html#dom-htmlmodelement-datetime" id="ref-for-dom-htmlmodelement-datetime-1">dateTime</a>;
};
</pre>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLModElement" data-dfn-type="attribute" data-export="" id="dom-htmlmodelement-cite"><code>cite</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-22">reflect</a> the element’s <code><a data-link-type="element-sub" href="edits.html#element-attrdef-edits-cite" id="ref-for-element-attrdef-edits-cite-1">cite</a></code> content attribute. The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLModElement" data-dfn-type="attribute" data-export="" id="dom-htmlmodelement-datetime"><code>dateTime</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-23">reflect</a> the
  element’s <code><a data-link-type="element-sub" href="edits.html#element-attrdef-edits-datetime" id="ref-for-element-attrdef-edits-datetime-1">datetime</a></code> content attribute.</p>
     </div>
     <h4 class="heading settled" data-level="4.6.4" id="edits-and-paragraphs"><span class="secno">4.6.4. </span><span class="content">Edits and paragraphs</span><a class="self-link" href="edits.html#edits-and-paragraphs"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <p>Since the <code>ins</code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-17">del</a></code> elements do not affect <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-14">paragraphing</a>, it is possible, in some cases where paragraphs are <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-15">implied</a> (without explicit <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-26">p</a></code> elements), for an <code>ins</code> or <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-18">del</a></code> element to span both an entire paragraph or other
  non-<a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-106">phrasing content</a> elements and part of another paragraph. For example:</p>
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;ins&gt;</span>
  <span class="nt">&lt;p&gt;</span>
    This is a paragraph that was inserted.
  <span class="nt">&lt;/p&gt;</span>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
  <span class="nt">&lt;/ins&gt;</span>
  This is a second sentence, which was there all along.
<span class="nt">&lt;/section&gt;</span>
</pre>
     <p>By only wrapping some paragraphs in <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-27">p</a></code> elements, one can even get the end of one
  paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same <code>ins</code> or <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-19">del</a></code> element (though this is very confusing, and not considered
  good practice):</p>
<pre class="bad">&lt;section&gt;  This is the first paragraph. &lt;ins&gt;This sentence was
  inserted.
  &lt;p&gt;This second paragraph was inserted.&lt;/p&gt;
  This sentence was inserted too.&lt;/ins&gt; This is the
  third paragraph in this example.
  &lt;!-- (don’t do this) --&gt;
&lt;/section&gt;</pre>
     <p>However, due to the way <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-16">implied paragraphs</a> are defined, it is
  not possible to mark up the end of one paragraph and the start of the very next one using the same <code>ins</code> or <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-20">del</a></code> element. You instead have to use one (or two) <code>p</code> element(s) and two <code>ins</code> or <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-21">del</a></code> elements, as for example:</p>
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;p&gt;</span>This is the first paragraph. <span class="nt">&lt;del&gt;</span>This sentence was
  deleted.<span class="nt">&lt;/del&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;&lt;del&gt;</span>This sentence was deleted too.<span class="nt">&lt;/del&gt;</span> That
  sentence needed a separate <span class="ni">&amp;lt;</span>del<span class="ni">&amp;gt;</span> element.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     <p>Partly because of the confusion described above, authors are strongly encouraged to always mark
  up all paragraphs with the <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-28">p</a></code> element, instead of having <code>ins</code> or <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-22">del</a></code> elements that cross <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-17">implied paragraphs</a> boundaries.</p>
     <h4 class="heading settled" data-level="4.6.5" id="edits-and-lists"><span class="secno">4.6.5. </span><span class="content">Edits and lists</span><a class="self-link" href="edits.html#edits-and-lists"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <p>The content models of the <code>ol</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-13">ul</a></code> elements do not allow <code>ins</code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-23">del</a></code> elements as children. Lists always represent all their
  items, including items that would otherwise have been marked as deleted.</p>
     <p>To indicate that an item is inserted or deleted, an <code>ins</code> or <code>del</code> element can be wrapped around the contents of the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-16">li</a></code> element. To indicate that an
  item has been replaced by another, a single <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-17">li</a></code> element can have one or more <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-24">del</a></code> elements followed by one or more <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-21">ins</a></code> elements.</p>
     <div class="example" id="example-7b1e2bb1">
      <a class="self-link" href="edits.html#example-7b1e2bb1"></a> In the following example, a list that started empty had items added and removed from it over
    time. The bits in the example that have been emphasized show the parts that are the "current"
    state of the list. The list item numbers don’t take into account the edits, though. 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>Stop-ship bugs<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;&lt;ins</span> <span class="na">datetime=</span><span class="s">"2008-02-12T15:20Z"</span><span class="nt">&gt;</span>Bug 225:
  Rain detector doesn’t work in snow<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del</span> <span class="na">datetime=</span><span class="s">"2008-03-01T20:22Z"</span><span class="nt">&gt;&lt;ins</span> <span class="na">datetime=</span><span class="s">"2008-02-14T12:02Z"</span><span class="nt">&gt;</span>Bug 228:
  Water buffer overflows in April<span class="nt">&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;ins</span> <span class="na">datetime=</span><span class="s">"2008-02-16T13:50Z"</span><span class="nt">&gt;</span>Bug 230:
  Water heater doesn’t use renewable fuels<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del</span> <span class="na">datetime=</span><span class="s">"2008-02-20T21:15Z"</span><span class="nt">&gt;&lt;ins</span> <span class="na">datetime=</span><span class="s">"2008-02-16T14:25Z"</span><span class="nt">&gt;</span>Bug 232:
  Carbon dioxide emissions detected after startup<span class="nt">&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
</pre>
     </div>
     <div class="example" id="example-ac96394a">
      <a class="self-link" href="edits.html#example-ac96394a"></a> In the following example, a list that started with just fruit was replaced by a list with just
    colors. 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>List of <span class="nt">&lt;del&gt;</span>fruits<span class="nt">&lt;/del&gt;&lt;ins&gt;</span>colors<span class="nt">&lt;/ins&gt;&lt;/h1&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del&gt;</span>Lime<span class="nt">&lt;/del&gt;&lt;ins&gt;</span>Green<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del&gt;</span>Apple<span class="nt">&lt;/del&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Orange<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del&gt;</span>Pear<span class="nt">&lt;/del&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;ins&gt;</span>Teal<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;del&gt;</span>Lemon<span class="nt">&lt;/del&gt;&lt;ins&gt;</span>Yellow<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Olive<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;ins&gt;</span>Purple<span class="nt">&lt;/ins&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.6.6" id="edits-and-tables"><span class="secno">4.6.6. </span><span class="content">Edits and tables</span><a class="self-link" href="edits.html#edits-and-tables"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <p>The elements that form part of the table model have complicated content model requirements that
  do not allow for the <code>ins</code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-25">del</a></code> elements, so indicating edits to a
  table can be difficult.</p>
     <p>To indicate that an entire row or an entire column has been added or removed, the entire
  contents of each cell in that row or column can be wrapped in <code>ins</code> or <code>del</code> elements (respectively).</p>
     <div class="example" id="example-ad6fea9f">
      <a class="self-link" href="edits.html#example-ad6fea9f"></a> Here, a table’s row has been added: 
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th&gt;</span> Game name           <span class="nt">&lt;th&gt;</span> Game publisher   <span class="nt">&lt;th&gt;</span> Verdict
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> Diablo 2            <span class="nt">&lt;td&gt;</span> Blizzard         <span class="nt">&lt;td&gt;</span> 8/10
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> Portal              <span class="nt">&lt;td&gt;</span> Valve            <span class="nt">&lt;td&gt;</span> 10/10
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;ins&gt;</span>Portal 2<span class="nt">&lt;/ins&gt;</span> <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;ins&gt;</span>Valve<span class="nt">&lt;/ins&gt;</span> <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;ins&gt;</span>10/10<span class="nt">&lt;/ins&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</pre>
      <p>Here, a column has been removed (the time at which it was removed is given also, as is a link
    to the page explaining why):</p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th&gt;</span> Game name           <span class="nt">&lt;th&gt;</span> Game publisher   <span class="nt">&lt;th&gt;</span> <span class="nt">&lt;del</span> <span class="na">cite=</span><span class="s">"/edits/r192"</span> <span class="na">datetime=</span><span class="s">"2011-05-02 14:23Z"</span><span class="nt">&gt;</span>Verdict<span class="nt">&lt;/del&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> Diablo 2            <span class="nt">&lt;td&gt;</span> Blizzard         <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;del</span> <span class="na">cite=</span><span class="s">"/edits/r192"</span> <span class="na">datetime=</span><span class="s">"2011-05-02 14:23Z"</span><span class="nt">&gt;</span>8/10<span class="nt">&lt;/del&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> Portal              <span class="nt">&lt;td&gt;</span> Valve            <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;del</span> <span class="na">cite=</span><span class="s">"/edits/r192"</span> <span class="na">datetime=</span><span class="s">"2011-05-02 14:23Z"</span><span class="nt">&gt;</span>10/10<span class="nt">&lt;/del&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> Portal 2            <span class="nt">&lt;td&gt;</span> Valve            <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;del</span> <span class="na">cite=</span><span class="s">"/edits/r192"</span> <span class="na">datetime=</span><span class="s">"2011-05-02 14:23Z"</span><span class="nt">&gt;</span>10/10<span class="nt">&lt;/del&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</pre>
     </div>
     <p>Generally speaking, there is no good way to indicate more complicated edits (e.g., that a cell
  was removed, moving all subsequent cells up or to the left).</p>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="textlevel-semantics.html#textlevel-semantics"><span class="secno">4.5</span> <span class="content">Text-level semantics</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics-embedded-content.html#semantics-embedded-content"><span class="secno">4.7</span> <span class="content">Embedded content</span></a> →</p></body></html>
